<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN\" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="arq" uri="/tld/arquitectura.tld" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="display" uri="http://displaytag.sf.net/el" %>
<%@ taglib prefix="dynamic" uri="/tld/dynamic.tld" %>

<html>
<head>
<jsp:include page="Head.jsp"/>

    <!--Round the menu tabs-->
    <script type="text/javascript">
        window.onload = function()
        {
            Nifty("ul#nav a", "small transparent top");
            checkBrowser();
        }

        function uploadVideo()
        {
            if( validateFields() )
            {
                if( categoryChanged() )
                {
                    if( confirm('You have changed the Category, if you have specify an incorrect Category the upload will fail.\nDo you want to continue?') )
                    {
                        document.forms[0].submit();
                    }
                }
                else
                {
                    document.forms[0].submit();
                }
            }
        }

        function categoryChanged()
        {
            var origCategoryContent = '<c:out value="${command.videoCategoryContent}" />';
            var origCategoryLabel = '<c:out value="${command.videoCategoryLabel}" />';

            var actualContent = document.getElementById('videoCategoryContent').value;
            var actualLabel = document.getElementById('videoCategoryLabel').value;

            return (origCategoryContent != actualContent) || (origCategoryLabel != actualLabel);

        }

        function logIntoGoogle()
        {
            document.location = 'authGoogle.htm';
        }

        function cancelUpload()
        {
            if( confirm('Abandon changes?') )
            {
                document.location = 'listVideosUser.htm';
            }
        }

        <arq:validateFields>
            <arq:fieldValidation validationType="required" fieldId="videoTitle" fieldAlias="<b><i>Video Title</i></b>" maxLenght="75" />
            <arq:fieldValidation validationType="required" fieldId="videoContent" fieldAlias="<b><i>Video Content</i></b>" maxLenght="200" />
            <arq:fieldValidation validationType="required" fieldId="videoFile" fieldAlias="<b><i>Video File</i></b>"  />
            <arq:fieldValidation validationType="required" fieldId="videoKeyWords" fieldAlias="<b><i>Video KeyWords</i></b>" maxLenght="200" />
            <arq:fieldValidation validationType="required" fieldId="videoCategoryContent" fieldAlias="<b><i>Category Content</i></b>" maxLenght="50" />
            <arq:fieldValidation validationType="required" fieldId="videoCategoryLabel" fieldAlias="<b><i>Category Label</i></b>" maxLenght="50" />
            <arq:fieldValidation validationType="required" fieldId="youTubeUsername" fieldAlias="<b><i>You Tube Username</i></b>" maxLenght="50"  />
            <arq:fieldValidation validationType="required" fieldId="youTubePassword" fieldAlias="<b><i>You Tube Password</i></b>" maxLenght="50" />
        </arq:validateFields>

    </script>


</head>
<body id="page" >
<c:set var="currentPage" value="uploadVideoPage" scope="request" />
<jsp:include page="Menu.jsp"/>

    <arq:errors classTable="tablaErrores" visibility="global" printModel="table" />
    <br/><br/><br/>

<form:form action="uploadVideo.htm" method="post" enctype="multipart/form-data" onsubmit="return validateFields()" >
    
    <table align="center" width="50%">
        <tr align="center">
            <td align="right" class="textLogin">Video Title</td>
            <td align="left">
                <form:errors path="videoTitle" cssClass="campoError"/>
                <form:input path="videoTitle" cssClass="inputClass" cssErrorClass="inputError"/>
            </td>
        </tr>
        <tr align="center">
            <td align="right" class="textLogin">Video Description</td>
            <td align="left">
                <form:errors path="videoContent" cssClass="campoError"/>
                <form:textarea path="videoContent" cssClass="inputClass" cssErrorClass="inputError"/>
            </td>
        </tr>
        <tr align="center">
            <td align="right" class="textLogin">Video File</td>
            <td align="left">
                <form:errors path="videoFile" cssClass="campoError"/>
                <input type="file" name="videoFile" class="inputClass" id="videoFile" />
            </td>
        </tr>
        <tr align="center">
            <td align="right" class="textLogin">Keywords <font style="font-size:9px">(use coma as separator to insert more than one)</font></td>
            <td align="left">
                <form:errors path="videoKeyWords" cssClass="campoError"/>
                <form:input path="videoKeyWords" cssClass="inputClass" size="40" cssErrorClass="inputError"/>
            </td>
        </tr>
        <tr align="center">
            <td align="right" class="textLogin">Category and Label</td>
            <td align="left">
                <table>
                    <tr>
                        <td>
                            <form:errors path="videoCategoryContent" cssClass="campoError"/>
                            <form:input path="videoCategoryContent" cssClass="inputClass" size="40" cssErrorClass="inputError"/><br/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <form:errors path="videoCategoryLabel" cssClass="campoError"/>
                            <form:input path="videoCategoryLabel" cssClass="inputClass" size="40" cssErrorClass="inputError"/>
                        </td>
                    </tr>
                </table>
            </td>

        </tr>
    </table>
    <br/><br/>
    <table align="center" width="50%">
        <tr align="center">
            <td align="right" class="textLogin" style="font-style:italic;">YouTube Username *</td>
            <td align="left">
                <form:errors path="youTubeUsername" cssClass="campoError"/>
                <form:input path="youTubeUsername" cssClass="inputClass" size="40" cssErrorClass="inputError"/>
            </td>
        </tr>
        <tr align="center">
            <td align="right" class="textLogin" style="font-style:italic;">YouTube Password *</td>
            <td align="left">
                <form:errors path="youTubePassword" cssClass="campoError"/>
                <form:password path="youTubePassword" cssClass="inputClass" size="40" cssErrorClass="inputError"/>
            </td>
        </tr>
    </table>
    <table align="center" width="50%">
        <tr align="center">
            <td>
                <span>* This user/password will not be stored in any database or persist in any way, will be used only to log you into YouTube</span>
            </td>
        </tr>
    </table>

    <br/><br/><br/><br/><br/><br/>
    <table align="center" width="50%">
        <tr align="center">
            <td>
                <dynamic:flashButton text="Upload" link="uploadVideo()" color="green" height="60" width="300" />
            </td>
            <td>
                <dynamic:flashButton text="Cancel" link="cancelUpload()" color="red" height="60" width="300" />
            </td>
        </tr>
    </table>
</form:form>




</body>
</html>